<script setup lang="ts">
    import {reactive,inject,onMounted} from 'vue'
    const echarts:any = inject('echarts')
    const props = defineProps({
        data: {
            type: Object as any
        }
    })
    const state = reactive({
        option: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '10%',
                left: '3%',
                right: '3%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // boundaryGap: false,
                data: [],
                axisLine: {
                show: false
                },
                axisTick: {
                show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                show: true,
                lineStyle: {
                    color: ''
                }
                },
            },
            series: [
                {
                name: '上周',
                type: 'line',
                data: [],
                symbol: 'circle',
                symbolSize: '8',
                itemStyle:{
                    color: '#6DA6EA'
                }
                },
                {
                name: '下周',
                type: 'line',
                data: [],
                symbol: 'circle',
                symbolSize: '8',
                itemStyle:{
                    color: '#FBC605'
                }
                }
            ]
        }
    })
    onMounted(()=>{
        state.option.series[0].name=props.data.lastWeek.name
        state.option.series[0].data=props.data.lastWeek.data
        state.option.series[1].name=props.data.theWeek.name
        state.option.series[1].data=props.data.theWeek.data
        state.option.xAxis.data = props.data.title
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartLine'));
        // 绘制图表
        myChart.setOption(state.option);
        // 图表响应式
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    })
</script>
<template>
    <div id="chartLine"></div>
</template>
<style scoped>
    #chartLine{
        height: 11.63rem;
        background: #FFFFFF;
        border-radius: 0.27rem;
        width: 100%;
    }
</style>